<template>
	<view>
		<!-- <wp-search class="clientRect" placeholder="搜索" @clearInput="clearInput" @cancelFocus="cancelFocus">
			<block slot="right">
				<view class="search_container" @click="openPopup">
					<u-icon style="display: flex;justify-content: center;" name="calendar-fill" size="36"></u-icon>筛选
				</view>
			</block>
		</wp-search> -->
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback"
			:up="upOption" @up="upCallback">
			<view class="order-list">
				<view class="order-item" v-for="(item,index) in dataList" :key="index">
					<view class="month"><text>{{item.years}}</text></view>
					<view class="abstract">
						<!-- 订单数 -->
						<view>{{$t("home.numberOfOrders")}}<view>{{item.orderQuantity}}</view></view>
						<!-- 销售额 -->
						<view>{{$t("home.sales")}}<view>￥{{item.sales}}</view></view>
						<!-- 收入 -->
						<view>{{$t("home.income")}}<view>￥{{item.income}}</view></view>
					</view>
					<view class="listWarp" v-for="(iitem,iindex) in item.orderList.list" :key="iindex">
						<view class="listWarp-left">
							<!-- 订单号 -->
							<view class="listWarp-left-order">{{$t("home.orderNumber")}}：{{iitem.orderNumber}}</view>
							<view class="listWarp-left-date">{{iitem.createTime}}</view>
						</view>
						<view class="listWarp-right" :style="{color:iitem.orderIncome=='0.00'||iitem.orderIncome==0?'red':''}">
							{{iitem.orderIncome}}
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>

		<lb-picker ref="picker" v-model="date" mode="dateSelector" :end-date="endDate" format="YYYY-MM"
			display-format="YYYY-MM" @confirm="handleConfirm">
		</lb-picker>
	</view>
</template>

<script>
	let app = getApp();
	import {
		mapGetters
	} from "vuex";
	import {
		formatTimes
	} from "@/utils/common.js";
	import {
		analysisApi
	} from '@/api/public.js';
	import wpSearch from "@/components/search/search.vue"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		computed: mapGetters(['isLogin']),
		components: {
			wpSearch,
		},
		data() {
			return {
				show: false,
				date: (formatTimes(new Date())).toString(),
				endDate: (formatTimes(new Date())).toString(),
				downOption: {
					textInOffset: this.$t('publicLang.pullDownToRefresh'), // 下拉的距离在offset范围内的提示文本
					textOutOffset: this.$t('publicLang.releaseUpdate'), // 下拉的距离大于offset范围的提示文本
					textLoading: this.$t('publicLang.loading'), // 加载中的提示文本
					textSuccess: this.$t('publicLang.loadedSuccessfully'), // 加载成功的文本
					textErr: this.$t('publicLang.failedToLoad'), // 加载失败的文本
				},
				upOption: {
					textLoading: this.$t('publicLang.loading'), // 加载中的提示文本
					auto: false, // 不自动加载
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 20, // 每页数据的数量
					},
					empty: {
						tip: this.$t('publicLang.empty') // 提示
						// btnText: "去看看",
					},
				},
				dataFrom: {
					page: 1,
					limit: 20
				},
				dataList: []
			}
		},
		onLoad() {

		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('navigation.dataAnalysis')
			});
		},
		methods: {
			upCallback(page) {
				var _this = this
				this.dataFrom.page = page.num
				analysisApi(this.dataFrom).then(res => {
					// console.info(res.data, 123)
					var data = res.data
					if (page.num == 1) {
						_this.dataList = [];
						_this.dataList = data;
					}
					/** 如果有另外的月份*/
					if(data.length>1){
						data.map((i,index)=>{
							if(index==0){
								i.orderList.list.map(res=>{
									_this.dataList[_this.dataList.length-1].orderList.list.push(res)
								})
							}else{
								_this.dataList = _this.dataList.concat(data[index]);
							}
						})
					}else{   // 只有当前月份
						if (page.num != 1) {
							var list = data[data.length-1].orderList.list
							list.map(i=>{
								_this.dataList[_this.dataList.length-1].orderList.list.push(i)
							})
						}
					}
					let count = 0
					_this.dataList.map(i => {
						count = count + i.orderList.list.length
					})
					_this.mescroll.endBySize(count,_this.dataList[0].orderList.total)
				}).catch((e) => {
					console.info(e)
				});
			},
			openPopup() {
				this.$refs.picker.show()
			},
			handleConfirm(e) {
				console.info(e)
			},
			clearInput() {
				// this.userFrom.keywords = ''
				// this.mescroll.resetUpScroll(false)
			},
			cancelFocus(e) {
				// if (e.type === "focus") return
				// this.userFrom.keywords = e.search
				// this.mescroll.resetUpScroll(false)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search_container {
		display: grid;
		grid-column: 1;
		grid-row: 2;
		font-size: 26rpx;
		justify-content: center;
		align-items: center;
		line-height: 33rpx;
		padding-right: 20rpx;
	}

	.order-item {
		background-color: #FFFFFF;
		padding: 20rpx 40rpx;
		margin: 20rpx 0;

		.month {
			text {
				font-size: 48rpx;
				font-weight: bold;
			}
		}

		.abstract {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			text {
				font-weight: bold;
				margin-left: 10rpx;
			}
		}

		.listWarp {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #111111;

			.listWarp-left {
				font-size: 26rpx;
				.listWarp-left-date {
					font-size: 22rpx;
					color: #999999;
					margin-top: 8rpx;
				}
			}

			.listWarp-right {
				font-weight: bold;
				font-size: 36rpx;
			}
		}
	}
</style>
